<template>
	<view class="publish-post">
		<view class="top-content">
			<u-form ref="uForm" :model="form" label-width="160">
				<view class="block" style="padding-bottom:20rpx;">
					<u-form-item label="标题" prop="workName" required>
						<u-input v-model="form.workName" :placeholder-style="pStyle"></u-input>
					</u-form-item>
					<u-form-item label="工作描述" label-position="top" :border-bottom="false" prop="remark" required>
						<u-input v-model="form.remark" type="textarea" maxlength="-1" :height="260" key="111" placeholder="主要向工人展示工作介绍"
						 :placeholder-style="pStyle" border></u-input>
					</u-form-item>
				</view>
				<view class="block">
					<u-form-item label="上传图片/视频(最多上传5个)" label-width="400" label-position="top">
						<view class="evaluate-c-b">
							<view class="goods-img-item" v-if="images.length" v-for="(img, key) in images" :key="key">
								<image class="del" src="/static/image/del.png" mode="" @click.stop="deleteImg(key)"></image>
								<image v-if="img.images_file_type == 'image'" class="img" :src="img.images_url" mode="aspectFill"></image>
								<video v-else class="video" :src="img.images_url" :show-center-play-btn="false" :controls="false" autoplay
								 muted></video>
							</view>
							<view class="upload-img" @click.stop="uploadImg" v-if="images.length < 5">
								<u-icon name="plus" size="50"></u-icon>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="block">
					<u-form-item label="薪酬" prop="salary" required>
						<u-input v-model="form.salary" placeholder="请输入薪酬，例如150/天、0.4分/点" :placeholder-style="pStyle"></u-input>
					</u-form-item>
					<u-form-item label="招聘人数" prop="needNum" required>
						<!-- <u-number-box slot="right" v-model="form.needNum" :min="1" disabled-input></u-number-box> -->
						<u-input v-model="form.needNum" type="number" :min="1" placeholder="" :placeholder-style="pStyle"></u-input>
					</u-form-item>
					<!-- <u-form-item label="开工时间" prop="startTime" required>
						<hTimePicker sTime="0" cTime="23" interval="10" timeNum="2" dayNum="30" @changeTime="changeTime" style="float:right;">
							<view slot="pCon" class="changeTime">
								{{ form.startTime || '点击选择时间' }}
							</view>
						</hTimePicker>
					</u-form-item> -->
					<u-form-item label="工作地点" prop="address" required>
						<view class="addr-con" @click="selectAddr">
							<view class="address-row" v-if="form.address">
								<view class="compName">
									{{ form.compName }}
								</view>
								<view class="address">
									{{ form.address }}
								</view>
							</view>
							<view v-else>
								请选择工作地点
							</view>
						</view>
					</u-form-item>
					<u-form-item label="联系电话" prop="mobile" required>
						<u-input v-model="form.mobile" slot="right" :custom-style="inputStyle" :placeholder-style="pStyle"></u-input>
					</u-form-item>
					<!-- <u-form-item label="所选分组" prop="group_ids">
						<u-input v-model="form.group_ids" placeholder="请点击在新页面勾选!!" disabled :placeholder-style="pStyle" @click="toPages"></u-input>
					</u-form-item>
					<u-form-item label="是否开放" prop="is_open">
						<u-input v-model="form.is_open" placeholder="请点击在新页面勾选!!" disabled :placeholder-style="pStyle" @click="toPages"></u-input>
					</u-form-item> -->
					<!-- <u-form-item label="类型" prop="types">
						<u-radio-group v-model="form.types">
							<u-radio name="1">短期工</u-radio>
							<u-radio name="2">长期工</u-radio>
						</u-radio-group>
					</u-form-item> -->
					<u-form-item label="招工奖励、奖励兑现时间及其他要求" label-position="top" :border-bottom="false" prop="content" required>
						<u-input v-model="form.content" type="textarea" :height="100" key="111" placeholder="小劳务中介可见,工人不可见"
						 :placeholder-style="pStyle" border></u-input>
					</u-form-item>
					<!-- <u-form-item label="给一线劳务的单独留言">
						<u-input v-model="form.content" type="textarea" placeholder="（工人不可见，一般包括招工要求，招工奖励和发放时间)" :placeholder-style="pStyle"></u-input>
					</u-form-item> -->
				</view>
				<!-- <view class="tips">
					注：短期工不需要费用，长期工按照展示天数收费。                   
				</view> -->
				<view class="fix-btn">
					<u-button shape="circle" :custom-style="customStyle" @click="submit" :loading="loading">发布</u-button>
				</view>
			</u-form>
		</view>
		<u-toast ref="uToast" />
		<!-- 选择时间 -->
		<!-- <u-picker v-model="isShowStartTime" mode="time" :params="timeSelectParams" @confirm="confirmStartTime"></u-picker> -->
	</view>
</template>

<script>
	import {
		apiUrl,
		uploadFiles,
		deleteFiles,
		filterTime
	} from '@/common/config.js';
	import {
		formatYmdhm
	} from '@/common/filter.js';
	var QQMapWX = require('@/common/qqmap-wx-jssdk.min.js');
	const qqmapsdk = new QQMapWX({
		key: 'XNYBZ-W7LKD-TSG4R-HG4UZ-ZOYQS-UXBUD'
	});
	import hTimePicker from "@/components/h-timePicker/h-timePicker.vue";
	import {
		mapState
	} from 'vuex';
	import Bus from './bus.js'
	export default {
		name: 'publishPost', // 发布岗位
		components: {
			hTimePicker
		},
		data() {
			return {
				apiUrl: apiUrl,
				inputStyle: {
					'text-align': 'right'
				},
				customStyle: {
					'background': '#E04110',
					'border-color': '#E04110',
					'color': '#fff'
				},
				pStyle: 'font-size:14px;color:#999;height:200rpx',
				form: {
					id: '',
					workName: '',
					remark: ' ',
					salary: '',
					needNum: 1,
					// startTime: '',
					endTime: '',
					compName: '',
					address: '',
					longitude: '',
					latitude: '',
					mobile: '',
					content: '',
					types: 1,
					atthUrls: [],
					group_ids: '',
					is_open: null
				},
				rules: {
					// group_ids: [
					// 	{
					// 		required: true,
					// 		message: '分组ID 必填',
					// 		trigger: ['change']
					// 	}
					// ],
					workName: [{
							required: true,
							message: '工种需求必填',
							trigger: ['change']
						},
						{
							max: 64,
							message: '长度不能超过64字',
							trigger: ['change']
						},
					],
					// types: [{
					// 	required: true,
					// 	message: '请选择岗位类型',
					// 	trigger: ['change']
					// }],
					remark: [{
							required: true,
							message: '请输入描述',
							trigger: ['change']
						},
						{
							max: 5120,
							message: '长度不能超过5120字',
							trigger: ['change']
						},
					],
					content: [
						{
								required: true,
								message: '请输入奖励',
								trigger: ['change']
							},
							{
								max: 512,
								message: '长度不能超过512字',
								trigger: ['change']
							},
					],
					salary: [{
							required: true,
							message: '请输入薪水',
							trigger: ['change']
						},
						{
							max: 20,
							message: '长度不能超过20字',
							trigger: ['change']
						},
					],
					needNum: [],
					address: [{
						required: true,
						message: '请选择工作地点',
						trigger: ['change']
					}, ],
					mobile: [{
							required: true,
							message: '请输入联系电话',
							trigger: ['change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				},
				loading: false,
				images: [],
				// isShowStartTime: false,
				timeSelectParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
			}
		},
		computed: {
			...mapState({
				mobile: state => state.mobile,
			})
		},
		onLoad(e) {
			this.form.remark = '';
			this.form.mobile = uni.getStorageSync('userPhone');
			if (e.reId) {
				this.form.id = e.reId;
				this.queryDetail();
				uni.setNavigationBarTitle({
					title: '修改招聘需求'
				})
			} else if (e.reId) { // 复制
				this.form.id = e.reId;
				this.queryDetail();
				this.form.id = '';
			} else {
				// 写入默认开始时间
				let date = new Date();
				date.setHours(9);
				date.setMinutes(30)
				// this.form.startTime = filterTime(date.getTime() + 1000 * 60 * 60 * 24);

				// 默认当前地址
				

				uni.getLocation({
					success: res => {
						this.form.longitude = res.longitude;
						this.form.latitude = res.latitude;
						this.getLocation()
					}
				})

				// 写入联系电话
				this.$u.api.postGetAdminInfo().then(res => {
						console.log('11'.res);
						if (res.code == 1000) {
							this.form.mobile = res.data.phone;
						}
					})
					.catch(err => {
						console.log(err);
					});
			}

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getLocation() {
				qqmapsdk.reverseGeocoder({ // qqmapsdk.reverseGeocoder
					location: {
						latitude: this.form.latitude,
						longitude: this.form.longitude
					},
					success: res => {
						console.log(res)
						this.form.compName = res.result.formatted_addresses ? res.result.formatted_addresses.rough : '';
						this.form.address = res.result.address;
						this.form.recruit_area = res.result.ad_info.name.replace(/,/g,'-')
					},
					fail: res => {
						console.log(res)
						this.$u.toast('解析地址错误')
					},
				})
			},
			// changeTime(e) {
			// 	let select = new Date(e).getTime();
			// 	let now = new Date().getTime();
			// 	if (select - now < (1000 * 60 * 60 * 2)) {
			// 		this.$u.toast('不能发布两小时内工作！');
			// 		return
			// 	}
			// 	// this.form.startTime = e.slice(0, -3);
			// },
			// 选择活动开始时间
			// confirmStartTime(e) {
			// 	console.log(e)
			// 	this.form.startTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute;
			// },
			selectAddr() {
				console.log('执行了吗')
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.form.compName = res.name;
						this.form.address = res.address;
						this.form.latitude = res.latitude;
						this.form.longitude = res.longitude;
						this.getLocation()
					},
					fail: () => {
						uni.showModal({
							title: '提示',
							content: '您禁用了位置信息，请点击右上角小程序设置打开！',
							showCancel: false
						})
					}
				})
			},
			uploadImg(key) {
				uploadFiles(res => {
					let img = {
						images_url: 'https://' + res.data.url, //图片的显示地址 yzr2020-1258429991.cos.ap-nanjing.myqcloud.com/media/20201017/7cffd99c69ae04b7a0cf5b8cd09f92ee
						images_id: res.data.id, //图片路径  media/20201017/7cffd99c69ae04b7a0cf5b8cd09f92ee
						images_file_type: res.data.fileType
					}
					this.$u.api.postSaveImages(img).then(res => {

						if (res.status == true) {
							console.log('11'.res);
						}
					})
					this.images.push(img);
					console.log(this.images)
				})
			},
			deleteImg(index) {
				let key = this.images[index].imaegs_id
				this.images.splice(index, 1)
				deleteFiles(key, () => { //删除文件 腾讯没有返回参数默认都是成功 //key=图片路径  media/20201017/7cffd99c69ae04b7a0cf5b8cd09f92ee
					this.$u.api.postDeleteImages(img).then(res => {

						if (res.status == true) {
							console.log('11'.res);
						}
					})
				})
			},
			queryDetail() { // 明细
				let params = {
					id: this.form.id
				}
				this.$u.api.postGetActivityInfo(params).then(res => {
					if (res.status == true) {
						let data = res.data;
						if (data) {
							this.form.workName = data.recruit_type_work;
							this.form.remark = data.recruit_requirement;
							this.form.content = data.recruit_content;
							this.form.salary = data.recruit_salary;
							this.form.types = data.recruit_types;
							this.form.needNum = String(data.recruit_people_number);
							// this.form.startTime = formatYmdhm(data.recruit_start_time);
							// this.form.endTime = data.endTime;
							this.form.address = data.recruit_address;
							this.form.longitude = data.recruit_longitude;
							this.form.latitude = data.recruit_latitude;
							this.form.mobile = data.recruit_link_tel;
							this.form.atthUrls = data.recruit_pic;
							this.form.group_ids = data.group_ids
							this.form.is_open = data.is_open
							this.form.recruit_area = data.recruit_area
							if (data.recruit_pic) {
								this.images = data.recruit_pic;
							}

						}
					}
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {

					if (valid) {
						
						let params = {
							workName: this.form.workName,
							remark: this.form.remark,
							salary: this.form.salary,
							needNum: this.form.needNum,
							// startTime: this.form.startTime,
							endTime: this.form.endTime,
							compName: this.form.compName,
							address: this.form.address,
							longitude: this.form.longitude,
							latitude: this.form.latitude,
							mobile: this.form.mobile,
							content: this.form.content,
							types: this.form.types,
							is_open: this.form.is_open,
							group_ids: this.form.group_ids,
							recruit_area: this.form.recruit_area,
							status: 'FB',
							statusName: '发布',

						}
						//console.log(valid)
						// if (this.form.id) {
						// 	params.id = this.form.id;
						// }
						if (this.images) {
							params.images = this.images.map(item => item.images_id).join()
						}
						uni.setStorageSync('formData', params)
						this.toPages()
					}
				})
			},
			toPages() {
				uni.redirectTo({
					url: '/pages/talent/publish-choice?is_open=' + this.form.is_open + '&group_ids=' + this.form.group_ids
				})
			},
			prefixNum(num) {
				return num < 10 ? ('0' + num) : num
			}
		}
	}
</script>

<style lang="scss" scoped>
	.publish-post {
		height: 100vh;
		position: relative;

		.top-content {
			height: calc(100vh - 120rpx);
			padding: 20rpx 30rpx;
			overflow: auto;
			overflow-x: hidden;

			.block {
				padding: 0rpx 20rpx 0 35rpx;
				background: #fff;
				border-radius: 6rpx;
				margin-bottom: 20rpx;
				box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);

				/deep/ .u-form-item {
					padding: 5rpx 0;
				}
			}

			.tips {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				line-height: 40rpx;
			}
		}

		.fix-btn {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 20rpx;
			background: #fff;
		}
	}

	.evaluate-c-b {
		overflow: hidden;
	}

	.upload-img {
		display: inline-block;
		width: 146rpx;
		height: 146rpx;
		margin: 14rpx;
		text-align: center;
		color: #999999;
		border: 2rpx solid #E1E1E1;
		border-radius: 4rpx;
		padding: 40rpx 0;
		background: #eee;
	}

	.goods-img-item {
		width: 174rpx;
		height: 174rpx;
		padding: 14rpx;
		float: left;
		position: relative;
	}

	.goods-img-item:nth-child(4n) {
		margin-right: 0;
	}

	.goods-img-item .img,
	.goods-img-item .video {
		width: 100%;
		height: 100%;
	}

	.del {
		width: 30rpx !important;
		height: 30rpx !important;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 999;
	}

	.addr-con {
		.address-row {
			line-height: 40rpx;

			.compName {
				color: #333;
			}

			.address {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>
